<template>
  <div>
    <VCM :contextMenuData="contextMenuData" @test1="test"></VCM>
    <el-table
      size="mini"
      class=""
      :data="tableDate"
      :max-height="tableHeight"
      @row-contextmenu="showRightMenu"
    >
      <el-table-column type="selection"> </el-table-column>
      <el-table-column label="客户名">
        <template slot-scope="scope">
          <el-image class="face" :src="scope.row.face" fit="cover"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="标签"> 标签？？ </el-table-column>
      <el-table-column label="性格">性格?? </el-table-column>
      <el-table-column label="年龄"> 年龄?? </el-table-column>
      <el-table-column label="聊天概要">
        <template slot-scope="scope">
          <el-image class="face" :src="scope.row.face" fit="cover"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="普客类型">
        <template slot-scope="scope">
          <el-image class="face" :src="scope.row.face" fit="cover"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="大客类型">
        <template slot-scope="scope">
          <el-image class="face" :src="scope.row.face" fit="cover"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="最后通时">
        <template slot-scope="scope">
          <el-image class="face" :src="scope.row.face" fit="cover"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="7日通次">
        <template slot-scope="scope">
          <el-image class="face" :src="scope.row.face" fit="cover"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="">
        <template slot-scope="scope">
          <el-badge
            class="badge"
            v-if="scope.row.unread > 0"
            :value="scope.row.unread"
          ></el-badge>
        </template>
      </el-table-column>
      <el-table-column label="">
        <template slot-scope="scope">
          <el-button
            v-if="isDev"
            type=""
            size="mini"
            @click="devlook(scope.row)"
            >btn</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
// import { RKM_option,RKM_fun } from '@/components/右键菜单option.js';

export default {
  name: "cuslist",
  components: {
    VCM: () => {
      return import("@/assets/vueContextMenu.vue");
    },
  },
  computed: {
    ...mapState(["postParams", "customerList"]),
    tableDate: function () {
      return this.customerList.customerList.map((v) => {
        return {
          id: this.$_.get(v, "id", "empty"),
          face: this.$_.get(v, "face", "empty"),
          eSCompanyId: this.$_.get(v, "eSCompanyId", "empty"),
          nickname: this.$_.get(v, "nickname", "nickname"),
          unread: this.$_.get(v, "unread", "empty"),
          isStar: this.$_.get(v, "isStar", "empty"),
          lastMsg: this.$_.get(v, "lastMsg", "empty"),
          lastTime: this.$_.get(v, "lastTime", "empty"),
          selfTag: this.$_.get(v, "selfTag", "selfTag"),
          tel: this.$_.get(v, "tel", "empty"),
          type: this.$_.get(v, "type", "empty"),
        };
      });
    },
    tableHeight: function () {
      return this.oneRowHeight * (this.customerList.SIZE + 1);
    },
    cellHeight: function () {
      return `${this.oneRowHeight - 6 * 2}px`;
    },
  },
  data() {
    return {
      isDev: process.env.NODE_ENV == "development",
      oneRowHeight: 37,
      contextMenuData: {
        menuName: "cusList",
        axis: { x: null, y: null },
        menulists: [
          {
            fnHandler: "test",
            icoName: "fa fa-fw fa-star",
            btnName: "无用占位",
          },
        ],
      },
    };
  },
  methods: {
    test: function () {},
    showRightMenu: function (row, col, $event) {
      console.log(
        "%c [ row ]-169",
        "font-size:13px; background:pink; color:#bf2c9f;",
        row
      );
      // console.log('%c [ row,col,$event ]-118', 'font-size:13px; background:pink; color:#bf2c9f;', row,col,$event)
      let x = $event.clientX;
      let y = $event.clientY;
      this.contextMenuData.axis.x = $event.clientX;
      this.contextMenuData.axis.y = $event.clientY;
      this.contextMenuData.menulists = this.createMenulists(row);
      $event.preventDefault();
      // RKM_fun.opt_M.showRightMenu.call(this,$event)
    },
    createMenulists: function (item) {
      console.log(
        "%c [ postParams ]-17",
        "font-size:13px; background:pink; color:#bf2c9f;",
        this.postParams
      );
      console.log(
        "%c [ this.postParams.DICT_CRM ]-183",
        "font-size:13px; background:pink; color:#bf2c9f;",
        this.postParams.DICT_CRM
      );
      // console.table(this.postParams.DICT_CRM.KVcharacter)
      // console.table(this.postParams.DICT_CRM.KVcsBelong)
      // console.table(this.postParams.DICT_CRM.KVcsTag)
      // console.table(this.postParams.DICT_CRM.KVoperationalPreference)
      // console.table(this.postParams.DICT_CRM.KVproduct)
      // console.table(this.postParams.DICT_CRM.KVservicePreferences)

      return [
        {
          fnHandler: "test1",
          icoName: "fa fa-fw fa-star",
          btnName: "客户详情",
        },
        {
          fnHandler: "test1",
          icoName: item.isStar ? "fa fa-fw fa-star" : "fa fa-fw fa-star-o",
          btnName: item.isStar ? "取消星标" : "设为星标",
        },
        {
          icoName: "fa fa-fw fa-list-ol",
          btnName: "分组",
          children: ((arr) => {
            return arr.map((v, i, a) => {
              return {
                fnHandler: "test1",
                icoName: "",
                btnName: v,
              };
            });
          })([
            "普客新客户",
            "普客老客户",
            "大客营销新客户",
            "大客营销老客户",
            "大客客服客户组",
            "复购组",
            "退款组",
            "过期组",
          ]),
        },

        {
          icoName: "fa fa-fw fa-angle-double-right",
          btnName: "进度",
          children: ((arr) => {
            return arr.map((v, i, a) => {
              return {
                fnHandler: "test1",
                icoName: "",
                btnName: v.name,
              };
            });
          })(this.$_.get(this.postParams, "DICT_IM_TAG[0].children")),
        },
        {
          icoName: "fa fa-fw fa-cny",
          btnName: "客户资金",
          children: ((arr) => {
            return arr.map((v, i, a) => {
              return {
                fnHandler: "test1",
                icoName: "",
                btnName: v.name,
              };
            });
          })(this.$_.get(this.postParams, "DICT_IM_TAG[1].children")),
        },
        {
          icoName: "fa fa-fw fa-align-left",
          btnName: "普客客服类型",
          children: ((arr) => {
            return arr.map((v, i, a) => {
              return {
                fnHandler: "test1",
                icoName: "",
                btnName: v.label,
              };
            });
          })(this.$_.get(this.postParams, "DICT_CRM.KVcsTag[0].children")),
        },
        {
          icoName: "fa fa-fw fa-align-left",
          btnName: "大客客服类型",
          children: ((arr) => {
            return arr.map((v, i, a) => {
              return {
                fnHandler: "test1",
                icoName: "",
                btnName: v.label,
              };
            });
          })(this.$_.get(this.postParams, "DICT_CRM.KVcsTag[1].children")),
        },
        {
          icoName: "fa fa-fw fa-align-left",
          btnName: "大客销售类型",
          children: ((arr) => {
            return arr.map((v, i, a) => {
              return {
                fnHandler: "test1",
                icoName: "",
                btnName: v.label,
              };
            });
          })(this.$_.get(this.postParams, "DICT_CRM.KVcsTag[2].children")),
        },
        {
          icoName: "fa fa-fw fa-exclamation-triangle",
          btnName: "风控标签",
          children: ((arr) => {
            return arr.map((v, i, a) => {
              return {
                fnHandler: "test1",
                icoName: "",
                btnName: v.label,
              };
            });
          })([
            { label: "黑", value: 1 },
            { label: "深红", value: 2 },
            { label: "红", value: 3 },
            { label: "橙", value: 4 },
            { label: "紫", value: 5 },
            { label: "解除", value: 99 },
          ]),
        },
      ];
    },
    devlook: function (item) {
      console.log(item);
    },
  },
  mounted: function () {
    console.log(this.customerList.customerList);
  },
};
</script>

<style>
</style>